<template>
    <table>
        <thead>
            <tr>
                <th>公司名称</th>
                <th>老板</th>
                <th>主营方向</th>
                <th>员工人数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item,index in companylist" :key="index">
                <td>{{ item.companyName }}</td>
                <td>{{ item.boss }}</td>
                <td>{{ item.drective }}</td>
                <td><button @click="changNum(index,-1)">-</button>{{ item.employess }}<button  @click="changNum(index,+1)">+</button></td>
                <td><button @click="del(index)">删除</button></td>
            </tr>
        </tbody>

    </table>
        总人数：{{ total }}

</template>
    
<script setup lang='ts'>
    import {ref,onMounted,computed} from "vue"
    type Companylist={
        companyName:string,
        boss:string,
        drective:string,
        employess:number,
    }
    type lists=Companylist[]

    const companylist=ref<lists>([])
    onMounted(()=>{
        setTimeout(()=>{
         const   list=[{    
                companyName:'蜗牛',boss:"邓强",drective:"it培训",employess:200
            },
            {
                companyName:'黑马',boss:"pink",drective:"it培训",employess:300
            },
            {
                companyName:'完美',boss:"dota",drective:"游戏",employess:150
            },]
            companylist.value=list
        },1000)
          
    })
    function changNum(index:number,n:-1|1){
        companylist.value[index].employess+=n
    }
   let total= computed(()=>{
        let t=0
        companylist.value.forEach(item=>{
            t+=item.employess
        })
        return t
    })
    function del(index:number){
        companylist.value.splice(index,1)
    }
</script>
    
<style>
    
</style>